<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>人机大战之成语接龙</title>
    <style>
        h1{
            color:red;
        }
        input{
            padding: 8px;
            border-radius: 6px;
        }
        .history{
            min-height: 100px;
            border:1px solid gray;
            border-radius:8px;
            padding:10px;
        }
        form >div:nth-child(2) {
            display: flex;
            gap: 10px;
        }
        .msg{
            color:red;
            font-weight: bold;
            margin: 10px 0;
        }
    </style>
</head>
<body><%
    request.setCharacterEncoding("utf-8");
    String cy=request.getParameter("cy");
    String history=request.getParameter("history");
    if (history==null)history="";
    //out.print(cy+"\t"+history);
    String msg="";
    String first="";
    boolean isWin=false;
    if(cy!=null) {
        cy = cy.trim();
        Class.forName("com.mysql.cj.jdbc.Driver");
        try (Connection cn = DriverManager.getConnection("jdbc:mysql://localhost:3306/db", "root", "12qwas");
             PreparedStatement ps = cn.prepareStatement("select  * from chengyu where cy=?")
        ) {
            ps.setString(1, cy);
            try (ResultSet rs = ps.executeQuery()) {
                if (rs.next()) {
                    history += "," + cy;
                    first = cy.substring(cy.length() - 1);
                } else {
                    msg = "Sorry,你输入的“" + cy + "”不是成语~";
                    first = cy.substring(0, 1);
                }
            }
        }
        if (msg.length() == 0) {
            try (Connection cn = DriverManager.getConnection("jdbc:mysql://localhost:3306/db", "root", "12qwas");
                 PreparedStatement ps = cn.prepareStatement("select  * from chengyu where first=? order by rand() limit 1")
            ) {
                ps.setString(1, first);
                try (ResultSet rs = ps.executeQuery()) {
                    if (rs.next()) {
                        cy = rs.getString("cy");
                        history += "," + cy;
                        first = cy.substring(cy.length() - 1);
                    } else {
                        msg = "恭喜你在成语接龙中战胜了计算机~";
                        isWin = true;
                    }
                }
            }
        }
    }
%>
<div class='kuang'>
    <h1>人机大战之成语接龙</h1>
    <div class='history'>
        <%
            String[] cys=history.split(",");
            for(int i=1; i<cys.length;++i){
                out.println("\t\t<p>"+i+".["+(i%2==0?"机":"人")+"] "+cys[i]+"</p>");
            }
        %>

    </div>
    <form method="post" action="">
        <div class='msg'><%=msg%></div>
        <div>
            <input type='text' name='cy' <%=isWin?"disabled":""%>/>
            <input type="submit" value='提交' onclick='return check()'/>
            <input type="button" value='重新开始' onclick=' again()'/>
            <input type='hidden' name='history' value='<%=history%>' />
        </div>
    </form>
</div>
<script>
    const $=function(selector){
        return document.querySelector(selector)
    }
    function again(){
        location.href=""
    }
    function check(){
        //函数返回true，表单会提交，若返回false，就不会提交。
        let first='<%=first%>'
        let cy=$('input[name=cy]').value.trim()
// 	if(cy.length<3||cy.length>14){
// 		$('.msg').innerText='成语的长度应在3~14汉字~'
// 	    return false
// 	}
// 	if(!cy.startWith(first)){
// 		$('.msg').innerText='你输入的成语必须以"关"开头~'
// 	    return false
// 	}
        try{
            if(cy.length<3||cy.length>14) throw new Error('成语的长度应在3~14汉字~')
            if(!cy.startsWith(first)) throw new Error('你输入的成语必须以"<%=first%>"开头~')
            return true
        }catch(e){
            $('.msg').innerText=e.message
            return false
        }
    }
</script>
</body>
</html>